/*
 * @Author: moxunjingmu
 * @Date: 2025-03-09 18:36:16
 * @Description: 
 */
import React, { ReactNode } from 'react';
import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
import { useTheme } from '@/hooks/useTheme';

interface ThemedCardProps {
  title?: string;
  children: ReactNode;
  style?: ViewStyle;
  titleStyle?: TextStyle;
  footer?: ReactNode;
}

export default function ThemedCard({ 
  title, 
  children, 
  style, 
  titleStyle,
  footer 
}: ThemedCardProps) {
  const { colors } = useTheme();
  
  return (
    <View 
      style={[
        styles.container, 
        { 
          backgroundColor: colors.card,
          borderColor: colors.border,
        },
        style
      ]}
    >
      {title && (
        <Text style={[styles.title, { color: colors.text }, titleStyle]}>
          {title}
        </Text>
      )}
      <View style={styles.content}>
        {children}
      </View>
      {footer && (
        <View style={[styles.footer, { borderTopColor: colors.border }]}>
          {footer}
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 12,
    borderWidth: 1,
    overflow: 'hidden',
    marginBottom: 16,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    padding: 16,
    paddingBottom: 12,
  },
  content: {
    padding: 16,
    paddingTop: 0,
  },
  footer: {
    padding: 12,
    borderTopWidth: 1,
  },
});